<script setup lang="ts">
import { getHomeBannerAPI } from '@/services/home'
import type { BannerItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'
import CategoryPanel from './components/CategoryPanel.vue'
import HotPanel from './components/HotPanel.vue'
import PageSkeleton from './components/PageSkeleton.vue'
import type { XtxGuessInstance } from '@/types/components'
// 是否处于加载状态
const isLoad = ref(false)
// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
  isLoad.value = true
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
  isLoad.value = false
}
// 判断是否处于下拉刷新状态
const refresher = ref<boolean>(false)
onLoad(() => {
  // 请求数据
  getHomeBannerData()
})
// 获取猜你喜欢组件实例
const guessRef = ref<XtxGuessInstance>()
// 下拉到底触发
const bottomOut = async () => {
  isLoad.value = true
  // 调子组件请求数据
  guessRef.value?.getGuessData()
  isLoad.value = false
}
// 下拉刷新
const onRefresherrefresh = async () => {
  if (refresher.value) return
  isLoad.value = true

  refresher.value = true
  // 调用清空方法
  guessRef.value?.resetData()
  // 请求新数据
  await guessRef.value?.getGuessData()
  refresher.value = false
  isLoad.value = false
}
</script>

<template>
  <!-- 导航栏 -->
  <CustomNavbar />
  <scroll-view
    scroll-y
    class="scroll"
    @scrolltolower="bottomOut"
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="refresher"
  >
    <!-- 骨架屏 -->
    <PageSkeleton v-if="isLoad" />
    <template v-else>
      <!-- 轮播图 -->
      <XtxSwiper :bannerList="bannerList" />
      <!-- 商品分类 -->
      <CategoryPanel />
      <!-- 热门推荐 -->
      <HotPanel />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
  scroll {
    flex: 1;
  }
}
</style>
